<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" th:content="'HTML,Springboot,thymeleaf,markdown,Layui,个人博客,'+${myinfo.getWebname()}+','+${myinfo.getNickname()}"/>
    <title th:text="${myinfo.getWebname()}"></title>
    <link rel="icon" th:href="'/style/images/system/'+${myinfo.getWebicon()}">

    <!--bootstrap3-->
    <link rel="stylesheet" href="/dist/bootstrap3/css/bootstrap.min.css">
    <script src="/dist/jquery/jquery-3.4.1.min.js"></script>
    <script src="/dist/bootstrap3/js/bootstrap.min.js"></script>

    <!--font-awesome-->
    <link rel="stylesheet" href="/style/fonts/font-awesome.min.css">

    <!--自定义css-->
    <link rel="stylesheet" href="/style/css/me.css">
    <script src="/script/me.js"></script>

    <!--layui-->
    <link rel="stylesheet" href="/dist/layui/css/layui.css" media="all">
    <script src="/dist/layui/layui.js"></script>

    <link rel="stylesheet" href="/dist/semantic/semantic.min.css">

    <!--editmd-->
    <link href="/dist/editormd/css/editormd.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/dist/editormd/editormd.min.js"></script>
    <link rel="stylesheet" href="/dist/editormd/css/editormd.preview.css"/>
    <script src="/dist/editormd/lib/marked.min.js"></script>
    <script src="/dist/editormd/lib/prettify.min.js"></script>
    <script src="/dist/editormd/lib/raphael.min.js"></script>
    <script src="/dist/editormd/lib/underscore.min.js"></script>
    <script src="/dist/editormd/lib/sequence-diagram.min.js"></script>
    <script src="/dist/editormd/lib/flowchart.min.js"></script>
    <script src="/dist/editormd/lib/jquery.flowchart.min.js"></script>

    <script language='javascript' th:inline="javascript">
        var web_time = [[${myinfo.getCreatetime()}]];

        function time() {
            var nowTime = new Date();
            var startTime = new Date(web_time);
            var xc = (nowTime.getTime() - startTime.getTime()) / 1000;
            var day = parseInt(xc / 86400);
            xc -= day * 86400;
            var hour = parseInt(xc / 3600);
            xc -= hour * 3600;
            var min = parseInt(xc / 60);
            var sec = parseInt(xc - min * 60);
            hour = guolv(hour);
            min = guolv(min);
            sec = guolv(sec);
            var str = day + '天' + hour + '小时' + min + '分' + sec;
            $("#recordTime").html(str);
        }

        setInterval(time, 1000);
    </script>
    <script type="text/javascript" th:inline="javascript">
        $(function () {
            var EditormdView;
            EditormdView = editormd.markdownToHTML("editormd-view", {
                htmlDecode: "style,script,iframe",  // you can filter tags decode
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true,  // 默认不解析
            });

            var like_flag = [[${like_flag}]];
            if(like_flag == 'Y'){
                $('#thumbs_artical_liked').show();
                $('#thumbs_artical_tolike').hide();
            }else{
                $('#thumbs_artical_liked').hide();
                $('#thumbs_artical_tolike').show();
            }
            var id = [[${artical.getId()}]];
            $('#thumbs_artical').click(function(){
                $.ajax({
                    type: "POST",
                    url: "/thumbup",
                    data: {
                        id: id,
                    },
                    success: function (result) {
                        $('#thumbs_artical_tolike').hide();
                        $('#thumbs_artical_liked').show();
                    },
                    error: function (e) {
                    }
                });
            });
        });
    </script>
</head>
<body>
<!--导航-->
<nav class="ui inverted attached navbar-fixed-top navbar-inverse m-shadow-small">
    <div class="ui container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle fa-inverse" data-toggle="collapse" data-target="#navbar-menu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div id="logo" class="navbar-brand navbar-logo">
                <a href="/"><img style="height: 30px;width: 30px" th:src="'/style/images/system/'+${myinfo.getBrandimg()}" class="img-circle" th:text="' '+${myinfo.getWebname()}"></a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar-menu">
            <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                <li class="navli"><a class="navbar-link" href="/index">首页</a></li>
                <li class="navli"><a class="navbar-link" href="/types">分类</a></li>
                <li class="navli"><a class="navbar-link" href="/tags">标签</a></li>
                <li class="navli"><a class="navbar-link" href="/archives">归档</a></li>
                <th:block th:if="${session.userinfo} != null">
                    <li class="navli"><a href="/space" class="navbar-link">我的空间</a></li>
                </th:block>
                <li class="navli"><a class="navbar-link" href="/me">关于我</a></li>
                <li class="navli"><a class="navbar-link" href="/link">友链</a></li>
                <li class=""><a href="javascript:void(0);" title="搜索"><i class="layui-icon layui-icon-search"></i></a>
                </li>
                <th:block th:if="${session.userinfo} != null">
                    <th:block th:if="${session.userinfo.getType()} == 'admin'">
                        <li class=""><a href="javascript:void(0);" id="manage-btn" title="后台管理"><i class="layui-icon layui-icon-website"></i></a></li>
                    </th:block>
                    <li class="nav-wel"><label><cite>欢迎您：<a th:href="@{/userinfo/{id}(id=${session.userinfo.id})}" th:text="${session.userinfo.nickname}"></a></cite></label></li>
                    <li><a class="nav-onoff" href="javascript:void(0);" id="logout-btn"> 退出</a></li>
                </th:block>
                <th:block th:if="${session.userinfo} == null">
                    <li><a class="nav-onoff" href="javascript:void(0);" id="login-btn">登录</a></li>
                </th:block>
            </ul>
        </div>
    </div>
</nav>
<!--导航结束-->
<div class="nav-split"></div>

<!--内容-->
<div class="m-container m-padded-large">
    <div class="ui container">
        <div class="ui stackable grid">
            <!--左边文章-->
            <div class="twelve wide column">
                <div class="ui top attached segment">
                    <h1 align="center" th:text="${artical.title}"></h1>
                    <div class="ui horizontal link list">
                        <div class="item" title="作者">
                            <img th:src="'/style/images/system/'+${user.getProphoto()}" alt="" class="ui avatar image blog"/>
                            <div class="content" th:text="${user.getNickname()}"></div>
                        </div>
                        <div class="item" title="发布时间">
                            <i class="fa fa-calendar"></i><label class="blog info" th:text="' '+${artical.getCreateDate()}"></label>
                        </div>
                        <div class="item" title="查看次数">
                            <i class="fa fa-eye"></i><label class="blog info" th:text="' '+${view_times}+'&nbsp;&nbsp;&nbsp;'"></label>
                        </div>
                        <div class="item" title="点赞次数">
                            <i class="fa fa-heart"></i><label class="blog info" th:text="' '+${like_times}+'&nbsp;&nbsp;&nbsp;'"></label>
                        </div>

                        <th:block th:if="${artical.getReprintFlag()} != '1'">
                            <div class="ui green basic left pointing label m-padded-mini">原创</div>
                        </th:block>
                        <th:block th:if="${artical.getReprintFlag()} == '1'">
                            <div class="ui orange basic left pointing label m-padded-mini">转载</div>
                        </th:block>
                        <!--分类-->
                        <div class="ui basic teal left pointing label m-padded-mini" th:text="${type.getName()}"></div>
                    </div>
                </div>

                <div class="ui attached padded segment">

                    <!--博客具体内容-->
                    <div class="typo typo-selection js-toc-content m-padded-left-right-responsive m-padded-large">
                        <div id="editormd-view">
                            <!--一定要添加hidden属性 否则会导致延迟渲染 文本框原始内容闪现-->
                            <textarea th:text="${artical.content}" hidden=""></textarea>
                        </div>
                        <!--<div class="m-text-a ui horizontal divider">“完”</div>-->
                    </div>
                    <div class="m-text-a ui horizontal divider" id="thumbs_artical_tolike" style="font-size: large;display: none;" >
                        <a href="javascript:" id="thumbs_artical"><i class="fa fa-thumbs-up fa-fw"></i>点赞</a>
                    </div>
                    <div class="m-text-a ui horizontal divider liked" id="thumbs_artical_liked" style="font-size: large;color: #D8222E;display: none;" >
                        <label href="javascript:;"  ><i class="fa fa-heart fa-fw"></i>已赞</label>
                    </div>
                    <!--分类-->
                    <th:block th:if="${artical_next} != null">
                        <a class="ui link teal right pointing label" th:href="@{/blog/{id}(id=${artical_next.getId()})}" th:text="'上一篇：'+${artical_next.getTitle()}"></a>
                    </th:block>
                    <th:block th:if="${artical_next} == null">
                        <label class="ui link teal right pointing label" th:text="'上一篇：没有更多了'"></label>
                    </th:block>

                    <th:block th:if="${artical_last} != null">
                        <a class="ui link teal left pointing label" th:href="@{/blog/{id}(id=${artical_last.getId()})}" th:text="'下一篇：'+${artical_last.getTitle()}"></a>
                    </th:block>
                    <th:block th:if="${artical_last} == null">
                        <label class="ui link teal left pointing label" th:text="'下一篇：没有更多了'"></label>
                    </th:block>

                    <!--备注文章信息-->
                    <div class="ui attached positive message">
                        <div class="ui middle aligned grid">
                            <div class="eleven wide column">
                                <ui class="list">
                                    <li>作者:<span th:text="${user.nickname}"></span> (扫码联系作者)</li>
                                    <li>发表时间:<span th:text="${artical.createTime}"></span></li>
                                    <li>版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)</li>
                                    <li>公众号转载:请在文末添加作者二维码</li>
                                </ui>
                            </div>
                            <div class="five wide column">
                                <img src="/style/images/system/wxgzh.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px">
                            </div>
                        </div>
                    </div>


                </div>
                <!--中间内容留言区域开始-->
                <div id="comment-container" class="ui bottom attached segment">
                    <!--中间内容留言区域列表-->
                    <div class="ui teal segment" id="message-container">

                    </div>
                    <div class="ui form">
                        <form id="submitForm">
                            <div class="field" hidden>
                                <input type="text" name="articalId" th:value="${artical.getId()}" readonly>
                            </div>
                            <div class="field">
                                <textarea id="message" name="content" lay-verify="required" placeholder="请输入评论信息 ... "></textarea>
                            </div>
                        </form>
                        <br/>
                        <div class="fields">
                            <div class="field m-margin-bottom-small m-mobile-wide">
                                <button class="ui teal button m-mobile-wide" lay-submit lay-filter="message-submit"><i class="edit icon"></i>提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--左边文章结束-->
            <!--右边-->
            <div class="four wide column">
                <!--分类-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column ">
                                <a href="/types" target="_self">MORE <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <div class="ui fluid vertical menu">
                            <th:block th:each="type:${types}">
                                <a th:href="@{/type/{id}(id=${type.get('id')})}" class="item">
                                    <span th:text="${type.get('name')}"/>
                                    <div class="ui red basic left pointing label" th:text="${type.get('count')}"></div>
                                </a>
                            </th:block>
                        </div>
                    </div>
                </div>
                <!--分类结束-->
                <!--标签-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a href="/tags" target="_self">MORE <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <th:block th:each="tag : ${tags}">
                            <a class="ui red basic left pointing label m-padded-small"
                               th:href="@{/tag/{id}(id=${tag.get('id')})}" target="_self">
                                <span th:text="${tag.get('name')}"/>
                                <div class="detail" th:text="${tag.get('count')}"></div>
                            </a></th:block>
                    </div>
                </div>
                <!--标签结束-->
                <!--推荐-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="bookmark icon"></i>最新推荐
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <div class="ui fluid vertical menu">
                            <th:block th:each="artical : ${newarticals}">
                                <a th:href="@{/blog/{id}(id=${artical.getId()})}" target="_self"
                                   class="item m-text-thin">
                                    <span th:text="${artical.getTitle()}"/>
                                </a>
                            </th:block>
                        </div>
                    </div>
                </div>
                <!--推荐结束-->
                <!--站点信息-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="info icon"></i>本站信息
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <div class="menu">
                            <div class="item m-padded-tb"><i class="sticky note outline icon"></i>文章总数:
                                <span th:text="${webinfo.get('artical_count')}"></span>篇
                            </div>
                            <div class="item m-padded-tb"><i class="tasks icon"></i>分类总数:
                                <span th:text="${webinfo.get('type_count')}"></span>个
                            </div>
                            <div class="item m-padded-tb"><i class="tags icon"></i>标签:
                                <span th:text="${webinfo.get('tag_count')}"></span>个
                            </div>
                            <div class="item m-padded-tb"><i class="comments outline icon"></i>评论总数:
                                <span th:text="${webinfo.get('comment_count')}"></span>条
                            </div>
                            <div class="item m-padded-tb"><i class="eye icon"></i>总访问量:
                                <span th:text="${webinfo.get('visit_count')}"></span>次
                            </div>
                            <div class="item m-padded-tb"><i class="eye icon"></i>今日访问量:
                                <span th:text="${webinfo.get('today_visit_count')}"></span>次
                            </div>
                            <div class="item m-padded-tb"><i class="paper plane icon"></i>建站时长:
                                <span id="recordTime"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--站点信息结束-->
                <!--传送门-->
                <div class="ui segments">
                    <div class="ui  secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="circle icon"></i>传送门
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <div class="ui cards">
                            <a class="yellow  card m-card-center" href="/tra">
                                <div class="content" style="background:url(/style/images/system/tra.png)">
                                    <div class="header">传送门</div>
                                    <div class="description">
                                        <p>我已经为您精心准备了小惊喜，赶快出发吧 go go go......</p>
                                    </div>
                                </div>

                            </a>
                        </div>
                    </div>
                </div>
                <!--传送门结束-->
                <!--公众号二维码-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="qrcode icon"></i>公众号
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">
                        <h4 class="ui horizontal divider header">欢迎关注我的公众号</h4>
                        <div class="ui centered card" style="width: 8em">
                            <img src="/style/images/system/wxgzh.jpg" alt="" class="ui rounded image" style="width: 8em">
                        </div>
                    </div>
                </div>
                <!--公众号二维码结束-->

                <!--公众号二维码-->
                <!--<h4 class="ui horizontal divider header">我的公众号</h4>
                <div class="ui centered card" style="width: 11em">
                    <img src="/style/images/system/wxgzh.jpg" alt="" class="ui rounded image" style="width: 11em">
                </div>-->
                <!--公众号二维码结束-->
            </div>
            <!--右边结束-->
        </div>
    </div>
</div>
<!--内容结束-->
<!--底部内容-->
<footer class="ui inverted vertical segment m-padded-large">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="four wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="/style/images/system/wx.jpg" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>

            <div class="four wide column">
                <h4 class="ui inverted header m-text-bold m-text-spaced">联系我</h4>
                <div class="ui inverted link list">
                    <a class="item footer-contract"
                       th:href="'mailto:'+${myinfo.getEmail()}+'?subject='+${myinfo.getWebname()}"
                       th:text="'Email: '+${myinfo.getEmail()}"></a>
                    <a class="item footer-contract" rel="external nofollow" target="_blank"
                       th:href="'http://wpa.qq.com/msgrd?v=3&amp;uin='+${myinfo.getQq()}+'&amp;site=qq&amp;menu=yes'"
                       title="QQ" th:text="'QQ: '+${myinfo.getQq()}"></a>
                </div>
            </div>
            <div class="eight wide column">
                <h4 class="ui inverted header m-text-bold m-text-spaced">站点说明</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini" align="">本站仅作为学习交流使用，未经许可不得用于任何商业目的。
                    <br/>本站所有内容如需转载请注明出处。
                    <br/>如有不足之处，欢迎各位对本站提出宝贵的意见。</p>
            </div>

        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny"
           th:text="${myinfo.getRecord()}"></p>
    </div>
</footer>
<!--底部内容结束-->
<!--返回顶部-->
<div id="toolBackTop" style="right: 56.375px;" hidden>
    <a class="sider-top" href="javascript:void (0);" title="返回顶部" onclick="gotop();return false;"></a>
</div>
<!--返回顶部结束-->

<script src="/dist/semantic/semantic.min.js"></script>
<script>
    $('.m-menu.m-toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

</script>

<script th:inline="javascript">
    var aid = [[${artical.getId()}]];
    layui.use(['form', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer;

        //监听提交
        form.on('submit(message-submit)', function (data) {
            var user = [[${session.userinfo}]];
            if(user == null){
                layer.msg("请先登录！", {icon: 2});
                return ;
            }

            var m = $('#message').val();
            if(m.replace(/(^\s*)|(\s*$)/g, "") == ''){
                layer.msg("留言能容不能为空！", {icon: 2});
                return ;
            }

            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/message/add",//url
                data: $("#submitForm").serialize(),
                success: function (result) {
                    layer.msg("留言成功！", {icon: 1});
                    $('#message').val('');
                    $('#message-container').load('/message/view?aid='+aid);

                }, error: function () {
                    layer.msg("留言失败，请重试！", {icon: 2});
                }
            });
        });
    });


    jQuery(function($) {
        var aid = [[${artical.getId()}]];
        $('#message-container').load('/message/view?aid='+aid);
    });


</script>

</body>
</html>